{extend name="base" /}

{block name="title"}精彩案例{/block}


{block name="content"}
<!--breadcrumb_area-->
<!--<section class="breadcrumb_area parallax_effect" data-background="{$cases_header_bg_img}" style="-->
<!--          background: url({$cases_header_bg_img}) no-repeat center-->
<!--            center / cover;-->
<!--        ">-->
<!--    <div class="overlay_bg"></div>-->
<!--    <div class="container">-->
<!--        <div class="bread_content">-->
<!--            <h2>精彩案例</h2>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->
<section style="margin-top: 90px;width: 100%">
    <!--    <div class="overlay_bg"></div>-->
    <div style="width: 100% !important;">
        <div class="bread_content">
            <h3 style="color: black;">精彩案例</h3>
            <h5 style="color:#c1c1c1;font-weight: normal !important;">EXCITING CASES</h5>
        </div>
        <div class="decoration-top-line"></div>
    </div>
</section>
<!--breadcrumb_area-->

<!--blog area-->
<section class="blog_area">

    <div class="container">
        <!--轮播图-->

        <div class="concert-container">

            <div class="carousel-container">
                <div id="concertCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://img.kmanstage.com/0528bd69-b11c-4e4f-af96-36a6dcc5f64c?e=1729569957&token=LGyASzu7qFhBuMaTrkmtFNokyDFQPRz7fQPBiGox:1M52klqFvlk1ni7gWnq4yW47M-g=" class="d-block w-100" alt="演唱会现场">
                            <div class="carousel-caption" style="bottom: 0 !important; padding-bottom: 0 !important; padding-top: 0 !important;">
                                <p class="carousel-text">要来尚城演唱会，感受音乐的魅力</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://img.kmanstage.com/770ef6ea-5dca-454b-b8f6-f5041cc237f0?e=1729569946&token=LGyASzu7qFhBuMaTrkmtFNokyDFQPRz7fQPBiGox:31kfa2g0wZJHpTp9vi8aX8mNJN4=" class="d-block w-100" alt="舞台效果">
                            <div class="carousel-caption" style="bottom: 0 !important; padding-bottom: 0 !important; padding-top: 0 !important;">
                                <p class="carousel-text">要来尚城演唱会，感受音乐的魅力</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://img.kmanstage.com/0528bd69-b11c-4e4f-af96-36a6dcc5f64c?e=1729569957&token=LGyASzu7qFhBuMaTrkmtFNokyDFQPRz7fQPBiGox:1M52klqFvlk1ni7gWnq4yW47M-g=" class="d-block w-100" alt="现场氛围">
                            <div class="carousel-caption" style="bottom: 0 !important; padding-bottom: 0 !important; padding-top: 0 !important;">
                                <p class="carousel-text">要来尚城演唱会，感受音乐的魅力</p>
                            </div>
                        </div>
                    </div>
                    <!-- 外部控制按钮 -->
                    <div class="external-controls">
                        <button id="externalPrev" class=" carousel-control-prev">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button id="externalNext" class="carousel-control-next">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
<!--                    <button class="carousel-control-prev" type="button" data-bs-target="#concertCarousel" data-bs-slide="prev">-->
<!--                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
<!--                        <span class="visually-hidden">Previous</span>-->
<!--                    </button>-->
<!--                    <button class="carousel-control-next" type="button" data-bs-target="#concertCarousel" data-bs-slide="next">-->
<!--                        <span class="carousel-control-next-icon" aria-hidden="true"></span>-->
<!--                        <span class="visually-hidden">Next</span>-->
<!--                    </button>-->
                </div>
            </div>

            <div class="event-info" style="margin-top: 20px">
            </div>
        </div>
        <!--轮播图end-->
        <div class="p_filter_info d-flex "  style="margin-bottom: 15px !important;">
            <h5>分类</h5>
            <div id="portfolio_filter" class="portfolio_filter">
                {volist name='case_type' id='item'}
                <div class="work_portfolio_item type-item {if $item.id == $selected_id || ($selected_id == null && $item.id == 0)}active{/if}"
                     data-type="{$item.id}">{$item.title}</div>
                {/volist}
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 blog_info">
                <div class="row case-container"></div>
                <div class="col-lg-12 text-center">
                    <a href="#" class="theme_w_btn theme_b_btn border_btn load-more">加载更多</a>
                </div>
            </div>
            <!-- <div class="col-lg-4">
                <div class="blog_sidebar">
                    <div class="sidebar_widget f_latest_widget">
                        <div class="f_latest_info">
                            <div class="media f_latest_item">
                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>

                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                            <div class="media f_latest_item">

                                <div class="media-body">
                                    <a href="#">
                                        <h5>
                                            2024 汪苏泷《大娱乐家》新年限定巡回演唱会音响工程及技术服务
                                        </h5>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</section>
<div class="sec_paded"></div>
<!--blog area-->
{/block}



{block name="script"}
<script>
    // 轮播图自动播放
    document.addEventListener('DOMContentLoaded', function() {
        const myCarousel = new bootstrap.Carousel(document.getElementById('concertCarousel'), {
            interval: 1114000,
            wrap: true
        });
        // 添加上一页按钮事件
        document.querySelector('.carousel-control-prev').addEventListener('click', function() {
            myCarousel.prev();
        });

        // 添加下一页按钮事件
        document.querySelector('.carousel-control-next').addEventListener('click', function() {
            myCarousel.next();
        });
        // 添加键盘控制
        document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowRight') {
                myCarousel.next();
            } else if (event.key === 'ArrowLeft') {
                myCarousel.prev();
            }
        });
    });



// 分页状态管理
let currentPage = 1;
let currentType = 0;
let hasMore = true;
let loadMoreBtn; // 缓存按钮引用

// 初始化案例缓存
window.caseCache = {};

// 页面加载初始化
document.addEventListener('DOMContentLoaded', function() {
    // 第一步：确保按钮元素存在
    loadMoreBtn = document.querySelector('.load-more');
    if (!loadMoreBtn) {
        console.error('错误：未找到加载更多按钮，请检查HTML结构');
        return;
    }
    
    // 第二步：初始化其他逻辑
    initPagination();
    bindLoadMore();
});


// 初始化分页
function initPagination() {
    const urlParams = new URLSearchParams(window.location.search);
    currentType = urlParams.get('type_id') || 0;
    currentPage = 1;
    
    const initialItem = document.querySelector(`.type-item[data-type="${currentType}"]`);
    if (initialItem) {
        initialItem.click();
    }
    loadCases(currentType);
}

// 绑定加载更多事件
function bindLoadMore() {
    loadMoreBtn.addEventListener('click', async function(e) {
        e.preventDefault();
        if (hasMore) {
            currentPage++;
            await loadCases(currentType, currentPage, true);
        }
    });
}


// 修改后的加载函数
async function loadCases(typeId, page = 1, isAppend = false) {
    try {
        const response = await fetch(`/cases/getlist?type_id=${typeId}&page=${page}`);
        const result = await response.json();
        
        if (result.code === 1) {
            // 数据结构验证
          
            // 缓存处理
            if (!window.caseCache[typeId]) window.caseCache[typeId] = [];
            
            if (isAppend) {
                window.caseCache[typeId].push(...result.data.info);
            } else {
                window.caseCache[typeId] = result.data.info;
            }

            renderCases(window.caseCache[typeId], isAppend);
            updatePaginationState(result.data.has_more);
            updateActiveType(typeId);
            
            // 更新全局状态
            currentType = typeId;
            currentPage = page;
            hasMore = result.data.has_more;
        }
    } catch (error) {
        console.error('加载失败:', error);
        loadMoreBtn.innerHTML = '加载失败，点击重试';
    }
}

// 更新渲染逻辑
function renderCases(cases, append = false) {
    const container = document.querySelector('.case-container');
    const html = cases.map(item => `
        <div class="col-lg-4 col-md-4">
            <div class="h_blog_post_item blog_item">  
                <a href="#" class="post_img" style="width:370px; height: 300px;align-items: center;display: flex !important;background: #f8f8f8;">
                    <img src="${item.url}" alt="${item.title}" loading="lazy">
                </a>
               <div class="post_content">
                 <!--    <a href="#"><h3>${item.title}</h3></a> -->
                </div>
            </div>
        </div>
    `).join('');

    container.innerHTML = html;
}

// 更新分页按钮状态
// 修改后的 updatePaginationState 函数
function updatePaginationState(hasMore) {
    const loadMoreBtn = document.querySelector('.load-more');
    console.log(hasMore);
    if (!loadMoreBtn) {
        console.error('加载更多按钮未找到!');
        return;
    }
    
    if (hasMore) {
        loadMoreBtn.style.display = 'inline-block';
        loadMoreBtn.innerHTML = '加载更多';
    } else {
        const shouldDisplay = window.caseCache[currentType]?.length > 0;
        loadMoreBtn.style.display = shouldDisplay ? 'inline-block' : 'none';
        loadMoreBtn.innerHTML = '没有更多数据了';
    }
}

// 修改分类点击事件
document.querySelectorAll('.type-item').forEach(item => {
    item.addEventListener('click', async function() {
        const typeId = this.dataset.type;
        if (typeId !== currentType) {
            currentPage = 1;
            hasMore = true;
            await loadCases(typeId);
        }
    });
});

// 更新分类激活状态
function updateActiveType(typeId) {
    document.querySelectorAll('.type-item').forEach(el => {
        el.classList.toggle('active', el.dataset.type == typeId);
    });
    history.replaceState(null, '', `?type_id=${typeId}`);
}

</script>
{/block}